import Vue from 'vue'
import VueRouter from 'vue-router'
import { Dialog } from 'vant'
import store from '@/store/'
// import Home from '../views/Home.vue'
// import Cate from '../views/Cate.vue'
// import GoodsList from '../views/GoodsList.vue'
// import GoodsDetail from '../views/GoodsDetail.vue'
// import My from '../views/My.vue'
// import Shop from '../views/Shop.vue'
// import Register from '../views/Register.vue'

Vue.use(VueRouter)

// 路由表
const routes = [
    {
        path: '/login',
        name: 'login',
        component: () => import('@/views/login/'),
        meta: { requiresAuth: false } // 添加额外的自定义数据
    },
    { // 一级路由渲染到跟组件中的 router-view
        path: '/',
        component: () => import('@/views/layout/'),
        children: [ // 子路由渲染到父路由的 router-view 中
            {
                path: '', //默认子路由
                name: 'home',
                component: () => import('@/views/home/index.vue'),
                meta: { requiresAuth: false } 
            },
            // {
            //     path: '/qa',
            //     name: 'qa',
            //     component: () => import('@/views/qa/'),
            //     meta: { requiresAuth: false } 
            // },
            // {
            //     path: '/video',
            //     name: 'video',
            //     component: () => import('@/views/video/'),
            //     meta: { requiresAuth: false }
            // },
            {
                path: '/my',
                name: 'my',
                component: () => import('@/views/my/index.vue'),
                meta: { requiresAuth: false }
            },
        ]
    },
    {
        path: '/search',
        name: 'search',
        component: () => import('@/views/search/'),
        meta: { requiresAuth: false }
    },
    {
        path: '/article/:articleId',
        name: 'article',
        component: () => import('@/views/article/'),
        // 将动态路由参数映射到组件的 props 中，无论是访问还是维护性都很方便
        props: true,
        meta: { requiresAuth: false }
    },
    {
        path: '/user/profile',
        name: 'user-profile',
        component: () => import('@/views/user-profile'),
        meta: { requiresAuth: false }
    },
    {
        path: '/user/chat',
        name: 'user-chat',
        component: () => import('@/views/user-chat'),
        meta: { requiresAuth: true }
    },
    {
        path: '/user/collect',
        name: 'user-collect',
        component: () => import('@/views/user-collect'),
        meta: { requiresAuth: true }
    },
    {
        path: '/user/history',
        name: 'user-history',
        component: () => import('@/views/user-history'),
        meta: { requiresAuth: true }
    },
    {
        path: '/news',
        name: 'news-index',
        component: () => import('@/views/news'),
        meta: { requiresAuth: true }
    }
]

const router = new VueRouter({
    routes
})

// to: 要访问的页面路由信息
// from: 来自哪个页面的路由信息
// next: 放行的标记
router.beforeEach((to, from, next) => {
    // 判断页面是否需要登录才能访问
    if (to.meta.requiresAuth) {
        // 如果已登录，则直接通过
        if (store.state.user) {
            return next()
        }

        // 没有登录，提示是否登录
        Dialog.confirm({
            title: '访问提示',
            message: '该功能需要登录才能访问，确认登陆吗'
        })
        .then(() => { // 确认执行这里
            router.replace({
                name: 'login',
                query: {
                    redirect: router.currentRoute.fullPath
                }
            })
        })
        .catch(() => { // 取消执行这里
            // 取消了，中断路由导航
            // next(false)
        });
    } else {
        // if (store.state.user && to.path ==='/login') {
        //     next(false)
        // } else {
        // 不需要登陆状态的页面，直接过去
        next()
    // }
    }
})

export default router
// export default new Router({
//     routes: [
//         {
//             path: '/',
//             redirect: '/home'
//         },{
//             path: '/home',
//             component: Home
//         },{
//             path: '/cate',
//             component: Cate
//         },{
//             path: '/goodsList',
//             component: GoodsList
//         },{
//             path: '/goodsDetail',
//             component: GoodsDetail
//         },
//         {
//             path: '/my',
//             component: My
//         },
//         {
//             path: '/shop',
//             component: Shop
//         },
//         {
//             path: '/register',
//             component: Register
//         }
//     ]
// })